<script setup lang="ts">
import { ref } from 'vue';

const text = ref('');
const buttonEditPlaceholder = ref('请输入...');
const forcePlaceholder = ref(true);
</script>
<template>
    <div class="my-2">
        <span>缺省情况: </span>
    </div>
    <f-button-edit :placeholder="buttonEditPlaceholder" v-model="text"></f-button-edit>
    <div class="my-2">
        <span>在缺省情况下，只读状态不显示提示信息: </span>
    </div>
    <f-button-edit :placeholder="buttonEditPlaceholder" readonly v-model="text"></f-button-edit>
    <div class="my-2">
        <span>在缺省情况下，禁用状态不显示提示信息: </span>
    </div>
    <f-button-edit :placeholder="buttonEditPlaceholder" disable v-model="text"></f-button-edit>
    <div class="my-2">
        <span>在只读状态下显示提示信息: </span>
    </div>
    <f-button-edit :placeholder="buttonEditPlaceholder" :force-placeholder="forcePlaceholder" readonly v-model="text"></f-button-edit>
    <div class="my-2">
        <span>在禁用状态下显示提示信息: </span>
    </div>
    <f-button-edit :placeholder="buttonEditPlaceholder" :force-placeholder="forcePlaceholder" disable v-model="text"></f-button-edit>
</template>
